<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">

  <link href="css/main.css" rel="stylesheet">
  <link href="css/base.css" rel="stylesheet">
  <script src="bootstrap/js/jquery.min.js"></script>
  <script src="bootstrap/js/bootstrap.js"></script>
  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="js/element-ui.js"></script>
  <style>
    footer {
      display: block;
      margin-top: 10px;
    }
  </style>
</head>
<title>首页</title>
<body>
<!-- 导航 -->
<nav id="ulInfo" class="navbar navbar-expand-md bg-white navbar-light fixed-top" style="height: 63px;font-size: 17px;">
  <h1 class="title">
    <a class="navbar-brand" href="#">
      <img src="img/studyLogo.png" alt="logo" width="40" height="40">
    </a>
  </h1>

  <!-- 折叠按钮 -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbar">

    <ul class="navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-link" href="#">首页</a></li>

      <!--      <li v-if="currentUser.roleId == 0" class="nav-item"><a class="nav-link" href="html/videoManager.html">视频管理</a></li>-->
      <li v-if="(currentUser.roleId == 2 || currentUser.roleId == 0)" class="nav-item"><a class="nav-link"
                                                                                          href="html/videoUpload.html">上传视频</a>
      </li>
      <li v-if="(currentUser.roleId == 2 || currentUser.roleId == 0)" class="nav-item"><a class="nav-link"
                                                                                          href="html/videoManager.html">视频管理</a>
      </li>
      <li v-if="currentUser.roleId == 0" class="nav-item"><a class="nav-link"
                                                             href="html/userManager.html">用户管理</a></li>
      <li v-if="currentUser.roleId == 0" class="nav-item"><a class="nav-link" href="html/functionManager.html">权限管理</a></li>
      <template v-if="currentUser.account == null">
        <li class="nav-item"><a class="nav-link" href="#" style="margin-right: 700px"></a></li>
        <li class="nav-item"><a class="nav-link" href="login.html">你好,请登录</a></li>
        <li class="nav-item"><a class="nav-link" href="#">|</a></li>
        <li class="nav-item"><a class="nav-link" href="register.html">免费注册</a></li>
      </template>

      <template v-if="currentUser.account != null">
        <!--下拉-->
        <li class="dropdown" style="margin-right: 450px">
          <a class="dropdown-toggle nav-link" data-toggle="dropdown" role="button" aria-haspopup="true"
             aria-expanded="false" style="cursor:pointer;">我的 <span class="caret"></span></a>
          <ul class="dropdown-menu" style="text-align: center;">
            <li><a style="color: #6c757d;" href="html/userInfo.html">个人中心</a></li>
            <li><a style="color: #6c757d;" href="html/collect.html">我的收藏</a></li>
            <li><a style="color: #6c757d;" href="html/browse.html">浏览记录</a></li>
            <li><a style="color: #6c757d;" href="userExit">退出登录</a></li>
          </ul>
        </li>
        <li class="nav-item"><a class="nav-link" href="html/userInfo.html">欢迎你：{{currentUser.account}}</a></li>
        <li class="nav-item"><a class="nav-link" href="#">|</a></li>
        <li class="nav-item"><a class="nav-link" href="userExit">退出</a></li>
      </template>
    </ul>
    <form action="html/search.html" class="form-inline ml-auto">
      <input id="searchInput" type="text" v-model="keyword" class="form-control mr-sm-2" placeholder="Search"
             @change="searchVideo">
      <input @click="searchVideo" type="button" class="btn btn-outline-secondary  my-2 my-sm-0" value="搜索">
    </form>
  </div>
</nav>
<!-- 轮播图 -->
<div id="carousel" class="carousel slide carousel-fade w-100 mt-5" data-ride="carousel">
  <!-- 指示符 -->
  <ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
    <li data-target="#carousel" data-slide-to="1"></li>
    <li data-target="#carousel" data-slide-to="2"></li>
  </ol>
  <!-- 轮播图片 -->
  <div class="carousel-inner pt-3">
    <div class="carousel-item active">
      <img src="img/banner1.jpg" class="mx-auto d-block w-100 h-50">
    </div>
    <div class="carousel-item">
      <img src="img/banner2.jpg" class="w-100 h-50">
    </div>
    <div class="carousel-item">
      <img src="img/banner3.jpg" class="w-100 h-50">
    </div>

    <!-- 左右切换按钮 -->
    <a class="carousel-control-prev" href="#carousel" data-slide="prev">
      <span class="carousel-control-prev-icon" style="width: 50px;height: 50px;"></span>
    </a>
    <a class="carousel-control-next" href="#carousel" data-slide="next">
      <span class="carousel-control-next-icon" style="width: 50px;height: 50px;"></span>
    </a>
  </div>
</div>

<!-- 风格展示区 -->
<div class="trend-style " id="itemInfo" style="background-color:#F0F0EE;">
  <!--主体开始-->
  <div class="box">
    <div class="box_con">
      <div class="res_con conten">
        <div class="res_con_list" id="videoIndex">
          <div id="res_con_province" class="res_con_box clearfix">
            <div class="res_left fl">
              <div class="res_grade" id="videoList">
                <!--每个视频模块-->
                <div v-for="(videoType, index) in videoTypeList" class="res_grade_con clearfix" id="java">
                  <div class="res_title">{{videoType.typeName}}</div>
                  <ul class="res_grade_title clearfix" style="margin-right: 50px">
                    <li class="more"><a href="html/search.html?keyword=">更多+</a></li>
                  </ul>
                  <div class="res_grade_list">
                    <div class="res_grade_wk clearfix2">
                      <ul>
                        <li style="height: 220px" v-for="(item,index) in videoList"
                            v-if="item.type == videoType.typeId" onmouseover="hoverDetail(this)">
                          <div class="label">{{item.type | formatType}}</div>
                          <div class="res_grade_img"><a :href="'showVideoDetail?vid='+item.vid"><img
                                  :src="'upload/'+item.coverUrl" style="width: 204px; height: 140px;cursor:pointer;"></a>
                          </div>
                          <p class="title">
                            <a :href="'showVideoDetail?vid='+item.vid" v-text="item.videoName">
                              视频名称
                            </a>
                          </p>
                          <p class="info" v-text="item.videoDetail.videoDetail">视频简介</p>
                          <p class="upload_info">
                            上传人：<span>{{item.videoDetail.issuer}}</span><br>上传时间：{{item.videoDetail.uploadTime| formatDate}}
                          </p>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <!--<div class="res_grade_con clearfix" id="Web">
                  <div class="res_title">Web</div>
                  <ul class="res_grade_title clearfix" style="margin-right: 50px">
                    <li class="more"><a href="html/search.html?keyword=web">更多+</a></li>
                  </ul>
                  <div class="res_grade_list">
                    <div class="res_grade_wk clearfix2">
                      <ul>
                        <li style="height: 220px" v-for="(item,index) in videoList"
                            v-if="item.type == 2" onmouseover="hoverDetail(this)">
                          <div class="label">{{item.type | formatType}}</div>
                          <div class="res_grade_img"><a
                                  :href="'showVideoDetail?vid='+item.vid"><img
                                  :src="'upload/'+item.coverUrl"
                                  style="width: 204px; height: 140px;cursor:pointer;"></a>
                          </div>
                          <p class="title"><a :href="'showVideoDetail?vid='+item.vid"
                                              v-text="item.videoName">视频名称</a></p>
                          <p class="info" v-text="item.videoDetail.videoDetail">视频简介</p>
                          <p class="upload_info">
                            上传人：<span>{{item.videoDetail.issuer}}</span><br>上传时间：{{item.videoDetail.uploadTime
                            | formatDate}}</p>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="res_grade_con clearfix" id="MySQL">
                  <div class="res_title">MySQL</div>
                  <ul class="res_grade_title clearfix" style="margin-right: 50px">
                    <li class="more"><a href="html/search.html?keyword=mysql">更多+</a></li>
                  </ul>
                  <div class="res_grade_list">
                    <div class="res_grade_wk clearfix2">
                      <ul>
                        <li style="height: 220px" v-for="(item,index) in videoList"
                            v-if="item.type == 3" onmouseover="hoverDetail(this)">
                          <div class="label">{{item.type | formatType}}</div>
                          <div class="res_grade_img"><a
                                  :href="'showVideoDetail?vid='+item.vid"><img
                                  :src="'upload/'+item.coverUrl"
                                  style="width: 204px; height: 140px;cursor:pointer;"></a>
                          </div>
                          <p class="title"><a :href="'showVideoDetail?vid='+item.vid"
                                              v-text="item.videoName">视频名称</a></p>
                          <p class="info" v-text="item.videoDetail.videoDetail">视频简介</p>
                          <p class="upload_info">
                            上传人：<span>{{item.videoDetail.issuer}}</span><br>上传时间：{{item.videoDetail.uploadTime
                            | formatDate}}</p>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="res_grade_con clearfix" id="JavaWeb">
                  <div class="res_title">JavaWeb</div>
                  <ul class="res_grade_title clearfix" style="margin-right: 50px">
                    <li class="more"><a href="html/search.html?keyword=javaweb">更多+</a></li>
                  </ul>
                  <div class="res_grade_list">
                    <div class="res_grade_wk clearfix2">
                      <ul>
                        <li style="height: 220px" v-for="(item,index) in videoList"
                            v-if="item.type == 4" onmouseover="hoverDetail(this)">
                          <div class="label">{{item.type | formatType}}</div>
                          <div class="res_grade_img"><a
                                  :href="'showVideoDetail?vid='+item.vid"><img
                                  :src="'upload/'+item.coverUrl"
                                  style="width: 204px; height: 140px;cursor:pointer;"></a>
                          </div>
                          <p class="title"><a :href="'showVideoDetail?vid='+item.vid"
                                              v-text="item.videoName">视频名称</a></p>
                          <p class="info" v-text="item.videoDetail.videoDetail">视频简介</p>
                          <p class="upload_info">
                            上传人：<span>{{item.videoDetail.issuer}}</span><br>上传时间：{{item.videoDetail.uploadTime
                            | formatDate}}</p>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>-->
              </div>
            </div>
            <div class="res_right fr">
              <div class="res_ranking" id="browseCountList">
                <div class="res_ranking_title" style="margin-bottom: 30px">热门视频推荐</div>
                <!--播放量前十-->
                <ul>
                  <li v-for="(item,index) in browseCountList" v-if="index<3">
                    <span :class="'bj_'+(index+1)" v-text="index+1"></span>
                    <a :href="'showVideoDetail?vid='+item.vid" v-text="item.videoName">视频名称</a>
                  </li>
                  <li v-for="(item,index) in browseCountList.slice(browseCountList.length-7,browseCountList.length)">
                    <span v-text="index+4"></span>
                    <a :href="'showVideoDetail?vid='+item.vid" v-text="item.videoName">视频名称</a>
                  </li>
                </ul>
              </div>
              <div class="res_resource">
                <div class="res_ranking_title" style="margin-bottom: 30px">下载排行榜</div>
                <!--下载量前十-->
                <ul>
                  <li v-for="(item,index) in downloadCountList">
                    <span class="bj_folder"></span>
                    <a :href="'showVideoDetail?vid='+item.vid" v-text="index+1+'. '+item.videoName">视频名称</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- footer部分 -->
<footer class="bg-white navbar-light p-4  text-center">
  <div class="container">
    <h3>合作伙伴</h3>
    <p class="m-1">企业培训 | 合作事宜 | 版权投诉</p>
    <p>冀ICP 备12345678. © 2019-2025 chaoliuchuanda. Powered by liuxin.</p>
  </div>
</footer>
</body>
<!--<script src="js/main.js"></script>-->
<script>
  let message = null;
  /*查看详情*/
  function hoverDetail() {
    $(".res_grade_wk>ul>li").hover(function (ev) {
      ev.stopPropagation();
      $(this).children(".upload_info").slideDown();
      $(this).children(".info").slideUp();
    }, function (ev) {
      ev.stopPropagation();
      $(this).children(".upload_info").slideUp();
      $(this).children(".info").slideDown();
    });
  }

  /*导航条用户信息*/
  new Vue({
    el: "#ulInfo",
    data: {
      currentUser: "",
      keyword: "",
    },
    methods: {
      getCurrentUser: function () {
        axios
          .post('getCurrentUser')
          .then(result => {
            this.currentUser = result.data;
          })
          .catch(function (error) {
            // this.$message({type: 'error', message: error.response.data});
          });
      },
      searchVideo: function () {
        window.location.href = "html/search.html?keyword=" + this.keyword;
      },
    },
    mounted() {
      message = this.$message;
      this.getCurrentUser();
    },
  });

  /*获取前十视频*/
  new Vue({
    el: "#videoIndex",
    data: {
      videoList: "",
      browseCountList: "",
      downloadCountList: "",
      videoTypeList: [],
    },
    methods: {
      getVideoTypeList: function () {
        const getVideoTypeListLoading = this.$loading({lock: true, text: 'Loading...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});
        axios.post('getVideoTypeList').then(result => {
          getVideoTypeListLoading.close();
          this.videoTypeList = result.data;
        }).catch(function (error) {
          getVideoTypeListLoading.close();
          this.$message({type: 'error', message: error.response.data});
        });
      },
      getVideoList: function () {
        const loading = this.$loading({lock: true, text: 'Loading...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});
        axios.get("getVideoList")
          .then(result => {
            loading.close();
            this.videoList = result.data;
          })
          .catch(function (error) {
            loading.close();
            message.error(error.response.data)
          })
      },
      getVideoBrowseByTop: function () {
        const loading = this.$loading({lock: true, text: 'Loading...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});

        axios.get("getVideoByTop?column=browseCount")
          .then(result => {
            loading.close();
            this.browseCountList = result.data;
          })
          .catch(function (error) {
            loading.close();
            message.error(error.response.data)
          })
      },
      getVideoDownloadByTop: function () {
        const loading = this.$loading({lock: true, text: 'Loading...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});

        axios.get("getVideoByTop?column=downloadCount")
          .then(result => {
            loading.close();
            this.downloadCountList = result.data;
          })
          .catch(function (error) {
            loading.close();
            message.error(error.response.data)
          })
      },
      /*  showVideoDetail: function (vid) {
            message.error("点击了")
            axios.get('showVideoDetail?vid='+vid)
                .then(result => {
                    message.error(result.data);
                })
                .catch(function (error) {
                    message.error(error.response.data)
                })
        }*/
    },
    mounted() {
      // 获取视频类型列表
      this.getVideoTypeList();
      this.getVideoList();
      this.getVideoBrowseByTop();
      this.getVideoDownloadByTop();
    },
    filters: {
      formatDate(time) {
        var date = new Date(time);
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var date = date.getDate();
        return year + "-" + month + "-" + date
      },
      formatType(typeId) {
        if (typeId === 1) {
          return "JavaSE";
        } else if (typeId === 2) {
          return "Web";
        } else if (typeId === 3) {
          return "MySQL";
        } else if (typeId === 4) {
          return "JavaWeb";
        }
        return "未知"
      },
    },
  });


  // 获取url参数名
  function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
      return unescape(r[2]);
    } else {
      return null;
    }
  }

  let msg = GetQueryString("msg");
  if (msg != null && msg !== '') {
    // message.error("系统异常! 错误信息: '" + msg + "'");
    message.error(msg)
  }

</script>
</html>
